<template>
    <div class="newRoutineUrineTest">
        <el-page-header @back="goBack" content="尿常规"></el-page-header>
        <el-container>
            <el-header id="header">尿规检查</el-header>
            <el-container>
                <!-- aside -->
                <el-aside width="350px" id="aside">
                    <div style="margin: 20px;"></div>
                    <!-- 检查确认 -->
                    <el-form label-width="80px" :model="detailsOfTheProject" id="form">
                        <el-form-item label="检查单号">
                            <el-input v-model="detailsOfTheProject.checkDetailId"></el-input>
                        </el-form-item>
                        <el-form-item label="病人姓名">
                            <el-input v-model="detailsOfTheProject.patientName"></el-input>
                        </el-form-item>
                        <el-form-item label="检查项目">
                            <el-input v-model="detailsOfTheProject.itemName"></el-input>
                        </el-form-item>
                        <el-form-item label="科室">
                            <el-input v-model="detailsOfTheProject.depName"></el-input>
                        </el-form-item>
                        <el-form-item label="检查医生">
                            <el-input v-model="detailsOfTheProject.doctorName"></el-input>
                        </el-form-item>
                        <el-form-item label="时间">
                            <el-date-picker v-model="detailsOfTheProject.testingTime" type="datetime"
                                placeholder="选择日期"></el-date-picker>
                        </el-form-item>
                        <el-form-item>
                            <el-button type="primary" round @click="open">开始检查</el-button>
                        </el-form-item>
                    </el-form>
                </el-aside>
                <el-container>
                    <!-- main -->
                    <el-main id="main">
                        <!-- 对应检查项目明细展示 -->
                        <el-table border :data="routineUrine" style="width: 100%"
                            :header-cell-style="{textAlign: 'center',background:'#67C23A',color:'#303133'}"
                            :cell-style="{ textAlign: 'center'}">
                            <el-table-column label="检查医嘱">
                                <el-table-column prop="whiteCell" label="白细胞"></el-table-column>
                                <el-table-column prop="urobilinogen" label="尿胆原"></el-table-column>
                                <el-table-column prop="microalbumin" label="微量蛋白"></el-table-column>
                                <el-table-column prop="protein" label="蛋白质"></el-table-column>
                                <el-table-column prop="bilirubin" label="胆红素"></el-table-column>
                                <el-table-column prop="glucose" label="葡萄糖"></el-table-column>
                                <el-table-column prop="ascorbicAcid" label="抗坏血酸"></el-table-column>
                                <el-table-column prop="proportion" label="比重"></el-table-column>
                                <el-table-column prop="ketones" label="酮体"></el-table-column>
                                <el-table-column prop="nitrite" label="亚硝酸盐"></el-table-column>
                                <el-table-column prop="occultBlood" label="隐血"></el-table-column>
                                <el-table-column prop="urinaryCalcium" label="尿钙"></el-table-column>
                                <el-table-column prop="phValue" label="pH值"></el-table-column>
                            </el-table-column>
                        </el-table>

                        <div style="margin: 20px;">
                            <el-row :gutter="10">
                                <!-- 检查总结 -->
                                <el-form ref="form" :model="inspectionUrine" label-width="100px">
                                    <el-col :span="24" :pull="1">
                                        <el-form-item label="病历摘要" prop="desc">
                                            <el-input type="textarea" v-model="inspectionUrine.records"></el-input>
                                        </el-form-item>
                                    </el-col>
                                    <el-col :span="24" :pull="1">
                                        <el-form-item label="临床诊断" prop="desc">
                                            <el-input type="textarea" v-model="inspectionUrine.clinicalDiagnosis ">
                                            </el-input>
                                        </el-form-item>
                                    </el-col>
                                    <el-col :span="24" :push="10">
                                        <!-- 生成检查结果表单 -->
                                        <el-button type="success" round @click="generateTheForm">检查完成</el-button>
                                    </el-col>
                                </el-form>
                            </el-row>
                        </div>
                    </el-main>
                    <!-- footer -->
                    <el-footer id="footer" height="120px">
                        <div style="margin: 10px;"></div>
                        <el-row :gutter="20">
                            <!-- 申请作废 -->
                            <el-form label-width="80px" :model="cancelApplyFor" id="formNew">
                                <el-col :span="8" :push="1"><br>
                                    <el-checkbox v-model="checked">作废申请</el-checkbox>
                                </el-col>
                                <el-col :span="8" :pull="2">
                                    <el-form-item label="作废时间" id="indexInput">
                                        <el-date-picker v-model="cancelApplyFor.checkDatatime" type="datetime"
                                            placeholder="选择日期"></el-date-picker>
                                    </el-form-item>
                                </el-col>
                                <el-col :span="8">
                                    <el-form-item label="作废人">
                                        <el-input v-model="cancelApplyFor.cancelPerson"></el-input>
                                    </el-form-item>
                                </el-col>
                                <el-col :span="8" :push="1">
                                    <!-- <el-form-item label="申请作废">
                                        <el-input v-model="cancelApplyFor.cancelName"></el-input>
                                    </el-form-item> -->
                                    <el-checkbox v-model="checked" :disabled=true>已缴费</el-checkbox>
                                </el-col>
                                <el-col :span="8" :pull="2">
                                    <el-form-item label="确认时间" id="indexInput">
                                        <el-date-picker v-model="cancelApplyFor.affirmDataTime" type="datetime"
                                            placeholder="选择日期"></el-date-picker>
                                    </el-form-item>
                                </el-col>
                                <el-col :span="8" :push="2">
                                    <el-button type="info" round @click="checkInvalid">检查作废</el-button>
                                </el-col>
                            </el-form>
                        </el-row>
                    </el-footer>
                </el-container>
            </el-container>
        </el-container>
    </div>
</template>


<script>
    export default {
        data() {
            return {
                // 检查确认对应数据
                detailsOfTheProject: {

                },
                // 检查项目明细数据
                routineUrine: [{
                    // 病历表ID
                    caseId: 0,
                    //检查详情表ID
                    checkDetailId: 0,
                    //查询详情
                    whiteCell: "2.5-3.6",
                    urobilinogen: "3.6-12.6",
                    microalbumin: "0.3-3.3",
                    protein: "4.3-5.6",
                    bilirubin: "4.9-9.8",
                    glucose: "0.1-1.3",
                    ascorbicAcid: "3.5-3.9",
                    proportion: "7.9-15.9",
                    ketones: "2.5-8.34",
                    nitrite: "43.5-63.5",
                    occultBlood: "4.2-53",
                    urinaryCalcium: "4.9-8.9",
                    phValue: "7.3-3.9",
                    //检查时间
                    testingTime: "",
                    // 病历摘要
                    records: "",
                    //临床诊断
                    clinicalDiagnosis: "",
                }],
                //用于接收给后台的数据
                sendData: {},
                // 检查结果操作
                inspectionUrine: {
                    // 病历摘要
                    records: "",
                    //临床诊断
                    clinicalDiagnosis: ""
                },
                // 作废申请数据
                cancelApplyFor: {

                },
                // 检查项目作废默认为不作废
                checked: false,


            }
        },
        methods: {
            //检查完成生成检查结果表存入数据库
            generateTheForm() {
                this.sendData = this.routineUrine[0];
                //检查时间
                this.sendData.testingTime = this.detailsOfTheProject.testingTime;
                // 病历表ID
                this.sendData.caseId = this.detailsOfTheProject.caseId;
                //检查详情表ID
                this.sendData.checkDetailId = this.detailsOfTheProject.checkDetailId;
                //病历摘要
                this.sendData.records = this.inspectionUrine.records;
                //临床诊断
                this.sendData.clinicalDiagnosis = this.inspectionUrine.clinicalDiagnosis;
                console.log("是否添加成功：");
                console.log(this.sendData);
                this.$http.put('http://localhost:8088/routineUrineTestformSubmission', this.sendData).then(res => {
                    console.log("检查生成检查结果详情表返回结果：")
                    console.log(res.data)
                    if (res.data.success) {
                        this.$message({
                            type: 'success',
                            message: '' + res.data.message

                        })

                    } else {
                        this.$message({
                            type: 'error',
                            message: '错误' + res.data.message
                        })
                    }
                }).catch(err => {
                    console.error(err)
                })
            },
            // 作废操作
            checkInvalid() {

            },
            //返回
            goBack() {
                this.$router.push('/bloodExamination')
            },
            // 组件 检查完成效果
            open() {
                this.$alert('正在正生成结果', '进度', {
                    confirmButtonText: 'OK',
                    callback: action => {
                        this.$message({
                            type: 'success',
                            message: `检查完毕`
                        });
                    }
                });
            },
        },
        mounted() {
            console.log("页面加载")
            console.log(this.$route.params.newRow)
            
            if (this.$route.params) {
                // 获取排队页面传入参数
                this.detailsOfTheProject = this.$route.params.newRow

            } else {
                console.log("没有数据")
            }
        }
    }
</script>

<style>
    #header {
        background-color: #eef3f1;
        box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);
        color: #333;
        text-align: center;
        line-height: 60px;

    }

    #aside {
        background-color: #eef3f1;
        box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
        color: #333;
        text-align: center;
        /* line-height: 400px; */
    }

    #main {
        box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
        /* border-radius: 6px; */
        background-color: #eef3f1;
        color: #333;
    }

    #footer {
        background-color: #eef3f1;
        box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);
        color: #333;
        /* text-align: center; */
        /* line-height: 200px; */

    }
</style>

<style>
    /* 调整input的输入框的高度 */
    #formNew .el-input__inner {
        width: 120px;
        height: 20px;
    }

    #form .el-input__inner {
        width: 220px;

    }

    /* 作废操作时间input框宽度 */
    #indexInput .el-input__inner {
        width: 200px;
    }
</style>